<template>
	<view class="container">
		<!-- 状态头部 -->
		<view class="status-section" :style="{backgroundColor: getStatusBgColor(refund.status)}">
			<image :src="getStatusIcon(refund.status)" class="icon" />
			<text class="label-text">{{refund.status | formatStatus}}</text>
			<text class="desc-text" v-if="refund.status === 0">等待商家审核中</text>
			<text class="desc-text" v-else-if="refund.status === 1">商家已同意，退款处理中</text>
			<text class="desc-text" v-else-if="refund.status === 2">退款已到账</text>
		</view>

		<!-- 退款金额 -->
		<view class="amount-section">
			<view class="amount-box">
				<text class="label">退款金额</text>
				<text class="amount">￥{{refund.refundAmount}}</text>
			</view>
			<view class="info-item">
				<text class="label">退款单号</text>
				<text class="value">{{refund.refundSn}}</text>
			</view>
			<view class="info-item">
				<text class="label">申请时间</text>
				<text class="value">{{refund.createTime | formatDateTime}}</text>
			</view>
		</view>

		<!-- 退款进度时间轴 -->
		<view class="timeline-section">
			<view class="section-title">退款进度</view>
			<view class="timeline-list">
				<view class="timeline-item" v-for="(item, index) in refund.timeline" :key="index">
					<view class="timeline-dot" :class="{active: index === 0}"></view>
					<view class="timeline-line" v-if="index < refund.timeline.length - 1"></view>
					<view class="timeline-content">
						<text class="timeline-status">{{item.status}}</text>
						<text class="timeline-desc" v-if="item.description">{{item.description}}</text>
						<text class="timeline-time">{{item.time | formatDateTime}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="section-title">商品信息</view>
			<view class="goods-item">
				<image :src="refund.productPic" mode="aspectFill"></image>
				<view class="goods-info">
					<text class="goods-title clamp">{{refund.productName}}</text>
					<text class="goods-price">￥{{refund.refundAmount}}</text>
				</view>
			</view>
		</view>

		<!-- 退款原因 -->
		<view class="reason-section">
			<view class="section-title">退款原因</view>
			<view class="reason-content">
				<text class="reason-text">{{refund.reason}}</text>
				<text class="reason-desc" v-if="refund.description">{{refund.description}}</text>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer" v-if="refund.status === 0">
			<button class="cancel-btn" @click="cancelRefund">取消申请</button>
		</view>
	</view>
</template>

<script>
	import {
		fetchRefundDetail,
		cancelRefund
	} from '@/api/refund.js';
	import {
		formatDate
	} from '@/utils/date';

	export default {
		data() {
			return {
				refundId: null,
				refund: {
					timeline: []
				}
			};
		},
		onLoad(option) {
			this.refundId = option.refundId;
			this.loadData();
		},
		filters: {
			formatStatus(status) {
				let statusTip = '';
				switch (+status) {
					case 0:
						statusTip = '退款申请中';
						break;
					case 1:
						statusTip = '商家已同意';
						break;
					case 2:
						statusTip = '退款成功';
						break;
					case 3:
						statusTip = '申请被拒绝';
						break;
					case 4:
						statusTip = '已取消';
						break;
				}
				return statusTip;
			},
			formatDateTime(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			}
		},
		methods: {
			// 加载数据
			loadData() {
				uni.showLoading({
					title: '加载中...'
				});

				fetchRefundDetail(+this.refundId).then(response => {
					uni.hideLoading();
					this.refund = response.data;
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.message || '加载失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				});
			},

			// 获取状态背景色
			getStatusBgColor(status) {
				switch (+status) {
					case 0:
						return '#ff9900';
					case 1:
						return '#5fcda2';
					case 2:
						return '#5fcda2';
					case 3:
						return '#999999';
					case 4:
						return '#999999';
					default:
						return '#fa436a';
				}
			},

			// 获取状态图标
			getStatusIcon(status) {
				switch (+status) {
					case 0:
						return '/static/icon_wait.png';
					case 1:
						return '/static/icon_deliver.png';
					case 2:
						return '/static/icon_finish.png';
					case 3:
						return '/static/icon_close.png';
					case 4:
						return '/static/icon_close.png';
					default:
						return '/static/icon_wait.png';
				}
			},

			// 取消退款
			cancelRefund() {
				uni.showModal({
					title: '提示',
					content: '确定要取消退款申请吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							});

							cancelRefund(+this.refundId).then(response => {
								uni.hideLoading();
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							}).catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err.message || '取消失败',
									icon: 'none'
								});
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.container {
		padding-bottom: 120upx;
	}

	.status-section {
		height: 260upx;
		background-color: $base-color;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30upx;

		.icon {
			width: 80upx;
			height: 80upx;
			margin-bottom: 20upx;
		}

		.label-text {
			color: #fff;
			font-size: 36upx;
			font-weight: bold;
			margin-bottom: 10upx;
		}

		.desc-text {
			color: rgba(255, 255, 255, 0.9);
			font-size: 26upx;
		}
	}

	.amount-section {
		background: #fff;
		margin-top: 20upx;
		padding: 30upx;

		.amount-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx 0;
			border-bottom: 1px solid #f5f5f5;

			.label {
				font-size: 28upx;
				color: $font-color-light;
				margin-bottom: 16upx;
			}

			.amount {
				font-size: 56upx;
				color: $base-color;
				font-weight: bold;
			}
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24upx 0;
			font-size: 28upx;

			.label {
				color: $font-color-light;
			}

			.value {
				color: $font-color-dark;
			}
		}
	}

	.timeline-section {
		background: #fff;
		margin-top: 20upx;
		padding: 30upx;

		.section-title {
			font-size: 32upx;
			color: $font-color-dark;
			font-weight: bold;
			margin-bottom: 30upx;
		}

		.timeline-list {
			position: relative;
		}

		.timeline-item {
			display: flex;
			position: relative;
			padding-bottom: 40upx;

			&:last-child {
				padding-bottom: 0;
			}
		}

		.timeline-dot {
			flex-shrink: 0;
			width: 20upx;
			height: 20upx;
			border-radius: 50%;
			background: #e5e5e5;
			margin-right: 20upx;
			margin-top: 6upx;
			z-index: 2;

			&.active {
				width: 24upx;
				height: 24upx;
				background: $base-color;
				box-shadow: 0 0 0 8upx rgba(250, 67, 106, 0.2);
			}
		}

		.timeline-line {
			position: absolute;
			left: 10upx;
			top: 26upx;
			bottom: 0;
			width: 2upx;
			background: #e5e5e5;
			z-index: 1;
		}

		.timeline-content {
			flex: 1;
			display: flex;
			flex-direction: column;

			.timeline-status {
				font-size: 30upx;
				color: $font-color-dark;
				margin-bottom: 8upx;
			}

			.timeline-desc {
				font-size: 26upx;
				color: $font-color-light;
				margin-bottom: 8upx;
				line-height: 1.5;
			}

			.timeline-time {
				font-size: 24upx;
				color: $font-color-light;
			}
		}
	}

	.goods-section {
		background: #fff;
		margin-top: 20upx;
		padding: 30upx;

		.section-title {
			font-size: 32upx;
			color: $font-color-dark;
			font-weight: bold;
			margin-bottom: 20upx;
		}

		.goods-item {
			display: flex;
			align-items: center;
			padding: 20upx;
			background: #fafafa;
			border-radius: 8upx;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 8upx;
				margin-right: 20upx;
			}

			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.goods-title {
					font-size: 28upx;
					color: $font-color-dark;
					margin-bottom: 16upx;
					line-height: 1.5;
				}

				.goods-price {
					font-size: 32upx;
					color: $base-color;
					font-weight: bold;
				}
			}
		}
	}

	.reason-section {
		background: #fff;
		margin-top: 20upx;
		padding: 30upx;

		.section-title {
			font-size: 32upx;
			color: $font-color-dark;
			font-weight: bold;
			margin-bottom: 20upx;
		}

		.reason-content {
			display: flex;
			flex-direction: column;
			padding: 20upx;
			background: #fafafa;
			border-radius: 8upx;

			.reason-text {
				font-size: 28upx;
				color: $font-color-dark;
				margin-bottom: 8upx;
			}

			.reason-desc {
				font-size: 26upx;
				color: $font-color-light;
				line-height: 1.5;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #fff;
		box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30upx;

		.cancel-btn {
			width: 50%;
			height: 70upx;
			line-height: 70upx;
			text-align: center;
			font-size: 30upx;
			color: $font-color-dark;
			background: #fff;
			border: 1px solid #e5e5e5;
			border-radius: 100upx;

			&:after {
				border: none;
			}
		}
	}
</style>
